Feature/929/js custom question pages by jupiter007 · Pull Request #1193 · CDLUC3/dmsp_frontend_prototype

jupiter007 · 2026-03-12T20:00:26Z

Description

Added new CustomQuestionEdit page
Added new QuestionCustomize page
Added new CustomQuestionNew page
Added new AddCustomQuestion, UpdateCustomQuestion, RemoveCustomQuestion, AddQuestionCustomization, UpdateQuestionCustomization, RemoveQuestionCustomization mutations
Added CustomQuestion and QuestionCustomizationByVersionedQuestion mutations
Added new routes for Custom Queries to utils/routes.ts
Moved addQuestionMutation out of QuestionView so that QuestionView can be shared for both BASE and CUSTOM questions
Updated QuestionTypeSelectPage to include the addQuestionMutation and getDisplayOrder and pass those to QuestionAdd
Added use of Loading component in TemplateCreatePage
Added fetchPolicy of cache-and-network to TemplateCustomiationOverview query so that we get updated data when user returns from editing section or question
Updated form components with isDisabled prop so that users customizing existing questions can see a disabled version of the form fields
Updated QuestionAdd to accept more props and be more flexible for shared use with Custom Questions
Updated QuestionView to accept more props like orgGuidance so it can be shared with Custom Questions

Fixes # (929)

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Manually tested with backend PR, CDLUC3/dmptool-apollo-server#636, and added unit tests

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I updated the CHANGELOG.md and added documentation if necessary
I have added tests that prove my fix is effective or that my feature works
I have completed manual or automated accessibility testing for my changes
New and existing unit tests pass locally with my changes
[*] Any dependent changes have been merged and published in downstream modules
*Note: backend PR that goes with this branch: Updates for Custom Questions dmptool-apollo-server#636

Important Note:

Please make sure to do a careful merge of development branch into yours, to make sure you aren't reverting or effecting any previous commits to the development branch.

Screenshots

Custom Questions are given different styles

Question Customization of a `BASE` Text area question

Customization of an existing Radio Button question. Note that the form fields are disabled

When Question Customization is going to be deleted, a confirmation modal appears

…m on the Question Customization pages but have them be disabled

jupiter007 · 2026-03-12T20:11:46Z

app/[locale]/account/profile/__tests__/page.spec.tsx

    givenName: 'John',
    surName: 'Doe',
-    affiliation: { name: 'Test Institution', uri: 'test-uri' },
+    affiliation: { name: 'Test Institution', uri: 'test-uri', displayName: 'Test Institution' },


I added the affiliationName.displayName to the MeQuery for the QuestionPreview so that we could be explicit about which Org added the guidance, therefore I was required to add it to some unit test mocks.

jupiter007 · 2026-03-12T20:12:13Z

app/[locale]/template/[templateId]/q/[q_slug]/page.tsx

  isOptionsType,
  getOverrides,
-} from './hooks/useEditQuestion';
+} from '@/app/hooks/useEditQuestion';


Moved the useEditQuestion to a shared location since the new Custom Question pages use it too

jupiter007 · 2026-03-12T20:12:57Z

app/[locale]/template/[templateId]/q/new/page.tsx

  Text
 } from "react-aria-components";

+


This page was updated to pass in new props to the shared QuestionAdd, because it is now shared with the Custom Question pages

jupiter007 · 2026-03-12T20:13:16Z

app/[locale]/template/create/page.tsx

  // TODO: Need to implement a shared loading component
  if (step === null) {
-    return <div>...{Global('messaging.loading')}</div>
+    return <Loading />;


Add Loading component here

jupiter007 · 2026-03-12T20:14:57Z

app/[locale]/template/customizations/[templateCustomizationId]/section/create/page.tsx

                    <Button
                      type="submit"
                      aria-disabled={isSubmitting}
+                      isDisabled={isSubmitting}


Adding disabling of Submit button when submit request is still active

jupiter007 · 2026-03-12T20:15:21Z

app/[locale]/template/page.tsx

 'use client';

 import React, { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';


Switched to using next/link because it's much faster than using React Aria Component's

Is that something we'll want to do site wide? If so, make sure you create a ticket so we don't lose track!

Seems like a perfect task for the Reeves team at some point

jupiter007 · 2026-03-12T20:15:48Z

app/[locale]/loading.tsx

@@ -0,0 +1,6 @@
+import Loading from '@/components/Loading';


Added this new component just in case, so page loads can fall back to this if it takes longer than 300ms

Nice. This is a good idea

jupiter007 · 2026-03-12T20:16:19Z

app/types/index.ts

  onChange?: (value: string) => void;
  isRequired?: boolean;
  isRequiredVisualOnly?: boolean;
+  isDisabled?: boolean;


For Question Customization pages, all form fields will be disabled in the page, so I updated all form fields with the isDisabled prop

jupiter007 · 2026-03-12T20:17:59Z

components/QuestionAdd/index.tsx

  questionName,
  questionJSON,
-  sectionId }:
+  sectionId,


New props were added so that we can more easily share this component between BASE and CUSTOM questions

jupiter007 · 2026-03-12T20:20:07Z

components/QuestionPreview/index.tsx

 interface QuestionPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  buttonLabel?: string,
  previewDisabled?: boolean,
+  onOpenChange?: (isOpen: boolean) => void,


Just passing an onOpenChange callback that helps re-render the fields in the previous page when the Preview modal is closed.

briri

This looks good to me

briri · 2026-03-13T20:44:53Z

app/[locale]/template/page.tsx

 'use client';

 import React, { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';


Is that something we'll want to do site wide? If so, make sure you create a ticket so we don't lose track!

Seems like a perfect task for the Reeves team at some point

briri · 2026-03-13T20:45:28Z

app/[locale]/loading.tsx

@@ -0,0 +1,6 @@
+import Loading from '@/components/Loading';


Nice. This is a good idea

jupiter007 added 9 commits March 10, 2026 08:14

merged development into branch

4ac4b1d

Added add Custom Question and edit Custom Question pages

1be811d

Added question customization

2276ab8

Added isDisabled to form field components, so that we can display the…

de224be

…m on the Question Customization pages but have them be disabled

Added unit tests

63910c7

Merge branch 'development' into feature/929/JS-custom-question-pages

0415056

optimized pages and fixed unit tests

e9a2489

Fixed linting and type errors

874d572

Updated CHANGELOG.md

6aa50e2

jupiter007 commented Mar 12, 2026

View reviewed changes

jupiter007 requested a review from briri March 13, 2026 15:16

briri approved these changes Mar 13, 2026

View reviewed changes

Conversation

jupiter007 commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Important Note:

Screenshots

Custom Questions are given different styles

Question Customization of a BASE Text area question

Customization of an existing Radio Button question. Note that the form fields are disabled

When Question Customization is going to be deleted, a confirmation modal appears

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

briri left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jupiter007 commented Mar 12, 2026 •

edited

Loading

Question Customization of a `BASE` Text area question